<template>
  <el-container>
    <el-header>
      <!-- 网站图片 -->
      <img src="../assets/web_img.png" />
      <!-- 登录注册按钮切换 -->
      <el-row class="change-btn">
        <el-button
          icon="el-icon-loading"
          type="success"
          circle
          title="切换页面"
        ></el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button round type="primary" @click="changePage('login')"
          >登录</el-button
        >
        <el-button round type="primary" @click="changePage('register')"
          >注册</el-button
        >
      </el-row>
    </el-header>
    <hr />
    <el-main>
      <div class="main-form">
        <!-- 标题 -->
        <div class="title">
          <h1>Register-用户注册</h1>
          <span>通过邮箱创建系统用户</span>
        </div>
        <!-- 表单 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="您的邮箱" prop="name">
            <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设置密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-row class="check-el-row">
            <el-input
              v-model="ruleForm.checkCode"
              placeholder="请输入验证码"
            ></el-input>
            <el-button type="primary" round @click="sendVerifyCode"
              >发送验证码</el-button
            >
          </el-row>
          <el-row>
            <el-button
              class="btn-submit"
              size="medium"
              @click="submitForm('ruleForm')"
              >确认注册</el-button
            >
          </el-row>
          <el-row class="tip-info">
            <span>{{ tipsInfo }}</span>
            <el-link type="primary" @click="toLogin">点击此处</el-link>
          </el-row>
        </el-form>
      </div>
    </el-main>
    <el-footer
      ><span>{{ copyRight }}</span></el-footer
    >
  </el-container>
</template>

<script>
import * as BaseService from '@/service/base/baseService'
import * as SendService from '@/service/send/sendService'
export default {
  name: 'register',
  data() {
    return {
      tipsInfo: '已有账户,现在登录?',
      copyRight: '@CopyRight By Author,Built in 2022-02',
      ruleForm: {
        name: '', //邮箱名称
        pass: '', //设置密码
        checkPass: '', //确认密码
        checkCode: '', //邮箱验证码
      },
      rules: {
        name: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱名称',
            trigger: ['blur', 'change'],
          },
        ],
        pass: [
          { required: true, message: '请设置账户密码', trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: '长度在 6 到 12 个字符',
            trigger: 'blur',
          },
        ],
        checkPass: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请确认输入密码'))
              } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
          {
            min: 6,
            max: 12,
            message: '长度在 6 到 12 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    //页面跳转方法
    changePage(page) {
      //获取当前页面名称
      let curPageName = this.$router.currentRoute.name
      // console.log(curPageName)
      //如果跳转页面==当前页面,直接return
      if (page === curPageName) {
        this.$message({
          showClose: true,
          message: '警告：已经位于目标页面!',
          type: 'warning',
        })
        return false
      }
      //跳转到登录页面
      switch (page) {
        case 'login': {
          // console.log(page)
          this.$router.push('/')
          break
        }
        case 'register': {
          // console.log(page)
          this.$router.push('/register')
          break
        }
      }
    },
    toLogin(){
      this.$router.push('/')
    },
    //发送验证码
    sendVerifyCode() {
      if (!this.ruleForm.name) {
        this.$message('请先填写您的邮箱！')
        return false
      }
      //Xwd949264@163.com
      SendService.sendEmail(this.ruleForm.name)
        .then((res) => {
          if (res && res.data) {
            this.$message({
              message: '验证码已发送至您的邮箱!',
              type: 'success',
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          this.$message({
            message: '验证码发送失败!',
            type: 'error',
          })
        })
    },
    /**
     * 表单信息提交
     */
    submitForm(formName) {
      let that = this
      //表单信息验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          BaseService.register({
            uname: this.ruleForm.name,
            pswd: this.ruleForm.pass,
            checkpswd: this.ruleForm.checkPass,
            verifycode: this.ruleForm.checkCode,
          })
            .then((res) => {
              console.log(res)
              if (res && res.data) {
                switch (res.data) {
                  case 6: {
                    //注册成功
                    this.$message({
                      message: '注册成功,将跳转到登录页面!',
                      type: 'success',
                    })
                    //页面跳转
                    setTimeout(function () {
                      that.$router.push('/login')
                    }, 3000)
                    break
                  }
                  case 5: {
                    //验证码为空
                    this.$message({
                      message: '注册失败，系统异常，请稍后再试',
                      type: 'warning',
                    })
                    break
                  }
                  case 4: {
                    //注册失败,请稍后再试!
                    this.$message.error('注册失败，邮箱验证码输入不正确')
                    break
                  }
                  case '3': {
                    //验证码错误
                    this.$message.error('注册失败，两次输入密码不一致')
                    break
                  }
                  case 2: {
                    this.$message.error('注册失败，用户已存在')
                    break
                  }
                  case 1: {
                    this.$message.error('注册失败，邮箱格式不正确')
                    break
                  }
                  default: {
                    //未知错误
                    this.$message.error('未知错误,请稍后再试!')
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error)
            })
        } else {
          this.$message.error('请检查并修改输入信息！')
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
.el-header,
.el-footer {
  width: 100%;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  z-index: 1;
}
.el-header {
}
@media screen and (max-width: 768px) {
  .change-btn {
    display: none;
  }
}

.el-footer {
  position: fixed;
  bottom: 0px;
  border-top: 1px solid #ccc;
}

.el-main {
  position: relative;
  width: 100%;
  background-color: #f9f9fa;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 1000px;
  z-index: 0;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-main .main-form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 480px;
  border: 1px solid #ccc;
  padding: 28px 15px;
  background-color: #ffffff;
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-main .main-form .title {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.el-main .main-form .title h1 {
  padding-bottom: 8px;
}
.el-main .main-form .title span {
  display: inline-block;
  color: blue;
  font-size: 12px;
}
.el-main .demo-ruleForm {
  margin-top: 25px;
}
.el-main .demo-ruleForm .btn-submit {
  font-size: 1rem;
  color: #ffffff;
  width: 100%;
  height: 50px;
  background-color: #007bff;
}
.el-main .demo-ruleForm .btn-submit:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
.el-main .demo-ruleForm .btn-submit:first-child {
  margin-bottom: 10px;
}
.tip-info {
  font-size: 0.9rem;
}

.check-el-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
.check-el-row .el-input {
  width: 200px;
}
.el-footer {
  background-color: #e4e7ed;
}
.el-footer span {
  color: #909399;
}
</style>
